<template>
  <div class="">
    <div>
      编号： <input type="text" v-model="id" /> 名字：
      <input type="text" v-model="name" /> 价格：<input
        type="text"
        v-model="price"
      />
      <button @click="add">add</button>
    </div>
    <hr />
    搜索：<input type="text" v-model="keywords" @keydown.enter="search" />
    <hr />
    <table border="1">
      <tr>
        <th>编号</th>
        <th>名字</th>
        <th>价格</th>
        <th>时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.time }}</td>
        <td>
          <button @click="edit(item, index)">编辑</button
          ><button @click="del(index)">删除</button>
        </td>
      </tr>
    </table>

    <div class="mask" v-show="flag">
      name:<input type="text" v-model="editName" />
      <br />
      price:<input type="text" v-model="editPrice" />
      <hr />
      <button @click="sure">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "法拉利",
          price: 20,
          time: new Date().toLocaleString(),
        },
        {
          id: 2,
          name: "布加迪威龙",
          price: 3,
          time: new Date().toLocaleString(),
        },
        {
          id: 3,
          name: "阿斯顿马丁",
          price: 3,
          time: new Date().toLocaleString(),
        },
        {
          id: 4,
          name: "莱肯",
          price: 3000,
          time: new Date().toLocaleString(),
        },
      ],
      //汽车列表数据
      id: "",
      name: "",
      price: "",
      //添加时候双向数据绑定的数据
      flag: false,
      //控制弹窗显示隐藏
      editName: "",
      editPrice: "",
      //编辑弹窗里input里的内容
      editIndex: -1,
      //获取需要编辑的数据的下标
      keywords: "",
      // 搜索框的搜索关键字
      copylist: [],
      //用来备份list数据，进行搜索操作的
    };
  },
  mounted() {
    this.copylist = this.list;
    //把list 的值复制一份给copylist
  },
  //这个mounted函数会在页面加载完成的时候自动执行，只执行一次
  methods: {
    add() {
      this.list.push({
        id: this.id,
        name: this.name,
        price: this.price,
        time: new Date().toLocaleString(),
      });
      this.id = "";
      this.name = "";
      this.price = "";
    },

    edit(item, index) {
      this.flag = true;
      this.editName = item.name;
      this.editPrice = item.price;
      this.editIndex = index;
    },
    //点击编辑按钮 让编辑弹窗出现并且数据回填,并且把编辑数据的下标保存下来 就知道编辑的是哪一条的

    sure() {
      this.flag = false;
      this.list[this.editIndex].name = this.editName;
      this.list[this.editIndex].price = this.editPrice;
    },
    //点击编辑弹窗里的确定按钮 修改数据并且关闭弹窗，通过刚才保存的编辑下标editindex 就能知道要修改哪条数据

    del(index) {
      this.list.splice(index, 1);
    },
    //删除一条数据

    search() {
      this.list = this.copylist.filter((item) => {
        return item.name.includes(this.keywords);
      });
      if (this.list.length == 0) {
        alert("没有结果");
      }
    },
    //从备份的数据中进行过滤过滤出name中有搜索关键字的数据，从备份数据中过滤保证了每一次的数据都是从全部数据中搜的
  },
};
</script>

<style lang="scss">
.mask {
  width: 300px;
  height: 300px;
  background: #ccc;
  position: absolute;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
</style>
